<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline">
    <div class="form-group">
        <label for="category_level_1">一级分类</label>
        <!--一级分类-->
        <select name="category_level_1" id="category_level_1"  class="form-control">
            <option value="">请选择分类</option>
            {foreach $data as $value}
            <option value="{$value->id}">{$value->cate_name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label for="category_level_2">二级分类</label>
        <select name="category_level_2" id="category_level_2"  class="form-control">
            <option value="">请选择分类</option>
        </select>
    </div>

    <div class="form-group">
        <label for="category_level_3">三级分类</label>
        <select name="category_level_3" id=category_level_3  class="form-control">
            <option value="">请选择分类</option>
        </select>
    </div>
</form>


<script src="/static/jquery-3.1.1.min.js"></script>

<script>
    // 代码重复、优化
    // 获取一级分类下面的分类（二级分类）
    $('#category_level_1').change(function () {
        var pid = $(this).val();

        // 发送请求
        $.ajax({
            url:'/mulitlevel/getCategory?pid=' + pid,
            dataType:'json',
            success:function (response) {
                let op = ''
                $.each(response.data,function (i,v) {
                    op += " <option value='" + v.id +"'>" + v.cate_name +  "</option>";
                });
                $('#category_level_2').append(op);
            }
        })
    });
    // 获取二级分类下面的分类（三级分类）
    $('#category_level_2').change(function () {
        var pid = $(this).val();
        // 发送请求
        $.ajax({
            url:'/mulitlevel/getCategory?pid=' + pid,
            dataType:'json',
            success:function (response) {
                let op = ''
                $.each(response.data,function (i,v) {
                    op += " <option value='" + v.id + "'>" + v.cate_name +  "</option>";
                });
                $('#category_level_3').append(op);
            }
        })
    });
</script>
</body>
</html>